<style>
  body {
    font-size: 14px;
    line-height: 24px;
    color: #fff;
    background-color: #000;
    font-family: 'robotolight';
  }
</style>
<div class="main-posts">
  <div class="container">
    <div class="row">
      <div class="blog-masonry masonry-true" id="photo-container">
        <% @photos.each do |p| %>
        <div class="post-masonry col-md-4 col-sm-6" data-index="<%= p.id%>">
          <div class="post-thumb">
            <%= image_tag(p.src,:size => 300 ) %>
            <div class="title-over">
              <h4><%= p.title %></h4>
            </div>
            <div class="post-hover text-center">
              <div class="inside">
                <i class="fa fa-plus"></i>
                <span class="date">create at :<%= p.created_at.strftime("%Y-%m-%d %H:%M") %></span>
                <h4><a href="javascript:;" class="delete" data-index="<%= p.id%>">delete</a></h4>
                <p>to click will remove this photo!</p>
              </div>
            </div>
          </div>
        </div>
        <% end %>
        <div class="post-masonry col-md-4 col-sm-6" id="addpic">
          <form enctype="multipart/form-data" id="picform">
            <input type="file" name="file" id="input" style="display: none">
          </form>
          <div class="post-thumb">
            <a><img src="/assets/Add.png" style="padding:30%"></a>
          </div>   
        </div>
      </div>
    </div>
  </div>
  <script type="text/html" id="templ">
    <div class="post-thumb">
      <img src="{{src}}">
      <div class="title-over">
        <h4>{{title}}</h4>
      </div>
      <div class="post-hover text-center">
        <div class="inside">
          <i class="fa fa-plus"></i>
          <span class="date">create at :{{date}}</span>
          <h4><a href="javascript:;" class="delete" data-index="{{id}}">delete</a></h4>
          <p>to click will remove this photo!</p>
        </div>
      </div>
    </div>
  </script>
  <script type="text/javascript">
    var templ = document.getElementById("templ").innerHTML
    var photoContainer = document.getElementById("photo-container")
    var addEl = document.getElementById("addpic")
    var input = document.getElementById("input")
    function generateElement(data) {
      if(!data) data = {}
        var rootDiv = document.createElement("div")
      rootDiv.className = "post-masonry col-md-4 col-sm-6"
      rootDiv.setAttribute("data-index", data.id || 0)
      var innerHTML = templ.replace(/{{(.*?)}}/gi, function (match, str, index, content){
        return data[str]||""
      })
      rootDiv.innerHTML = innerHTML
      return rootDiv
    }
    document.getElementById("addpic").addEventListener("click", function () {

      input.click()
    })
    input.addEventListener("change", function (e) {
      var file = input.files[0]
      var formData = new FormData();
      formData.append('file', file);
      $.ajax({
        url: '/photos',
        type: 'POST',
        contentType: false,
        processData: false,
        data: formData,
        success: function (data,status) {
          if(status === 'success') {
            photoContainer.insertBefore(generateElement(data),addEl)
          }
        },
        error: function () {
          console.log('error',arguments)
        }
      })
    })

    $("#photo-container").on('click', '.delete', function (e) {
      var target = e.target;
      console.log(target)
      var index  = target.getAttribute('data-index');
      $.ajax({
        url: '/photos/'+index,
        type: 'DELETE',
        success: function(data,status){
          if(status === 'success') {
            $("[data-index="+ index +"]").remove()
          }
        }
      })

    })
  </script>
